<template>
  <div
    style="
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #ccc;
      display: flex;
    "
  >
    <div
      style="
        width: 200px;
        padding-left: 30px;
        font-weight: bold;
        color: dodgerblue;
      "
    >
      后台管理
    </div>
    <div style="flex: 1"></div>
    <div style="width: 100px">
      <el-dropdown>
        <span class="el-dropdown-link">
          {{ consumer.nickName }}
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="drawer = true">个人信息</el-dropdown-item>
            <el-dropdown-item @click="logout">退出系统</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>

      <el-drawer v-model="drawer" title="基本信息">
        <el-form ref="form" :model="form" :label-width="formLabelWidth">
          <el-form-item label="用户名">
            <el-input v-model="form.username" disabled></el-input>
          </el-form-item>
          <el-form-item label="昵称">
            <el-input v-model="form.nickName"></el-input>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="form.age"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio v-model="form.sex" label="男">男</el-radio>
            <el-radio v-model="form.sex" label="女">女</el-radio>
            <el-radio v-model="form.sex" label="未知">未知</el-radio>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="form.address"></el-input>
          </el-form-item>
        </el-form>
        <div style="text-align: center">
          <el-button type="primary" @click="update">保存</el-button>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import { ArrowDown } from "@element-plus/icons-vue";
import { ElMessageBox } from "element-plus";
import request from "@/utils/request";
export default {
  name: "Header",
  props: ["consumer"],
  data() {
    return {
      // 抽屉开关
      drawer: false,
      form: {},
      formLabelWidth: "80px",
    };
  },
  components: {
    ArrowDown,
    ElMessageBox,
  },
  created() {
    let str = sessionStorage.getItem("consumer") || "{}";
    this.form = JSON.parse(str);
  },
  methods: {
    // 更新信息
    update() {
      request.put("/consumer", this.form).then((response) => {
        console.log(response);
        if (response.result === "SUCCESS") {
          this.$message({
            type: "success",
            message: "更新成功",
          });
          sessionStorage.setItem("consumer", JSON.stringify(this.form));
          // 触发Layout更新用户信息
          this.$emit("consumerInfo");
        } else {
          this.$message({
            type: "error",
            message: response.message,
          });
        }
      });
      this.drawer = false;
    },
    logout() {
      if (sessionStorage.getItem("consumer")) {
        sessionStorage.removeItem("consumer");
      }
      this.$router.push("/member");
    },
  },
};
</script>

<style lang="scss" scoped></style>
